<template>
	<view class="main">
		<view class="search">
			<input type="text" v-model="key" placeholder="输入搜索内容" @confirm="handdata" /><u-icon name="search"
				color="#999" size="32" @click="handdata"></u-icon>
		</view>
		<view class="sort">
			<view :class="gid==item.id?'active':''" @click="handtype(item.id,item.title)"
				v-for="(item,index) in typelist" :key="index">{{item.title}} <text></text></view>
		</view>
		<view class="list">
			<navigator :url="'/pages/info/info?id='+item.id+'&title='+title" class="li" v-for="(item,index) in list"
				:key="index">
				<image :src="item.img" mode="aspectFill"></image>
				<view class="text">
					{{item.desc}}
				</view>
				<view class="title">
					{{item.title}}
				</view>
			</navigator>
		</view>
		<view class="zwsj" v-if="list.length<=0&&!flag">
			----暂无数据----
		</view>
		<view class="zwsj" v-else>
			----到底了----
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				id: '',
				title: '',
				gid: '',
				key: '',
				page: 1,
				limit: 10,
				flag: false,
				typelist: [],
				list: []
			}
		},

		onLoad(option) {
			this.id = option.id
			uni.setNavigationBarTitle({
				title: option.title
			})
			this.handtypelist()
		},
		methods: {
			handtypelist() {
				global.$http.request({
					url: '/api/good/good_type',
					data: {
						pid: this.id
					}
				}).then(res => {
					this.typelist = res.data.data
					this.gid = this.typelist[0].id
					this.title = this.typelist[0].title
					this.handdata()
				})
			},
			handdata() {
				this.page = 1
				this.list = []
				this.handlist()
			},
			handtype(id, title) {
				this.gid = id
				this.title = title
				this.handdata()
			},
			handlist() {
				global.$http.request({
					url: '/api/good/good',
					data: {
						type: this.id,
						gid: this.gid,
						key: this.key,
						page: this.page,
						num: this.limit,
					}
				}).then(res => {
					let list = res.data.data.data
					list = list.map(item => {
						item.img = item.image.split(',')[0];
						return item
					})
					this.list = [...this.list, ...list]
				})
			},
			// 上拉加载
			onReachBottom() {
				if (this.list.length < this.page * this.limit) return this.flag = true
				this.page++
				this.handlist()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;

		.main {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.search {
				width: 710rpx;
				height: 85rpx;
				border-radius: 90rpx;
				border: 1rpx solid #EEE;
				background-color: #f8f8f8;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 40rpx;

				input {
					width: 100%;
					font-size: 28rpx;
				}
			}

			.sort {
				width: 700rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				overflow-y: auto;

				view {
					padding: 0 20rpx;
					font-size: 28rpx;
					color: #999999;
					flex-shrink: 0;
					display: flex;
					flex-direction: column;
					align-items: center;

					text {
						display: block;
						width: 46rpx;
						height: 4rpx;
						background: #fff;
						margin-top: 10rpx;
					}
				}

				.active {
					color: #24282f;
					font-weight: 500;
					font-size: 30rpx;

					text {
						background: #24282F;
					}
				}
			}

			.list {
				width: 710rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.li {
					width: 345rpx;
					height: 480rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 345rpx;
						height: 345rpx;
					}

					.title {
						max-width: 345rpx;
						color: #666666;
						font-size: 30rpx;
						margin-top: 5rpx;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-break: break-all;
					}

					.text {
						max-width: 345rpx;
						color: #666666;
						text-align: center;
						margin-top: 10rpx;
						font-size: 24rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
						white-space: nowrap;
					}
				}
			}

		}
	}
</style>